import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store";

Vue.use(VueRouter)

// 定义路由
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue')
  },
  {
    path: '/front',
    name: 'Front',
    component: () => import('../views/front/Front'),
    children: [
      {
        path: 'home',
        name: 'FrontHome',
        component: () => import('../views/front/Home.vue')
      },
      {
        path: 'password',
        name: 'Password',
        component: () => import('../views/front/Password.vue')
      },
      {
        path: 'person',
        name: 'Person',
        component: () => import('../views/front/Person.vue')
      },
      {
        path: 'article',
        name: 'Article',
        component: () => import('../views/front/Article.vue')
      },
      {
        path: 'goodsList',
        name: 'GoodsList',
        component: () => import('../views/front/GoodsList.vue')
      },
      {
        path: 'goodsDetail/:id',
        name: 'GoodsDetail',
        component: () => import('../views/front/GoodsDetail.vue')
      },
      {
        path: 'cart',
        name: 'Cart',
        component: () => import('../views/front/Cart.vue')
      },
      {
        path: 'orderConfirm',
        name: 'OrderConfirm',
        component: () => import('../views/front/OrderConfirm.vue')
      },
      {
        path: 'orderDetail',
        name: 'OrderDetail',
        component: () => import('../views/front/OrderDetail.vue')
      },
      {
        path: 'payment',
        name: 'Payment',
        component: () => import('../views/front/Payment.vue')
      },
      {
        path: 'comment',
        name: 'Comment',
        component: () => import('../views/front/Comment.vue')
      },
      {
        path: 'orderList',
        name: 'OrderList',
        component: () => import('../views/front/OrderList.vue')
      },
      {
        path: 'collect',
        name: 'Collect',
        component: () => import('../views/front/Collect.vue')
      }
    ]
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  routes
})

// 重置路由
export const resetRouter = () => {
  router.matcher = new VueRouter({
    mode: 'history',
    routes
  })
}

// 设置动态路由，注意：刷新页面会导致页面路由重置
export const setRoutes = () => {
  const storeMenus = localStorage.getItem("menus");
  if (storeMenus) {
    // 拼装动态路由
    const manageRoute = { 
      path: '/', 
      name: 'Manage', 
      component: () => import('../views/Manage.vue'), 
      redirect: "/home", 
      children: [
        { path: 'person', name: '个人信息', component: () => import('../views/Person.vue')},
        { path: 'password', name: '修改密码', component: () => import('../views/Password.vue')},
      ] 
    }
    const menus = JSON.parse(storeMenus)
    menus.forEach(item => {
      if (item.path) {  // 当且仅当path不为空的时候才去设置路由
        let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue')}
        manageRoute.children.push(itemMenu)
      } else if(item.children.length) {
        item.children.forEach(subItem => {
          if (subItem.path) {
            let itemMenu = { path: subItem.path.replace("/", ""), name: subItem.name, component: () => import('../views/' + subItem.pagePath + '.vue')}
            manageRoute.children.push(itemMenu)
          }
        })
      }
    })

    // 获取当前所有路由的名称数组
    const currentRouteNames = router.getRoutes().map(v => v.name)
    // 判断是否存在Manage路由
    if (!currentRouteNames.includes('Manage')) {
      // 动态添加路由
      router.addRoute(manageRoute)
    }
  }
}

// 每次刷新页面都要重新设置路由，否则路由就会被重置
setRoutes()

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 设置当前的路由名称
  localStorage.setItem("currentPathName", to.name)  
  store.commit("setPath")

  if (!to.matched.length) {
    const menus = localStorage.getItem("menus")
    if (!menus) {
      next("/login")
    } else {
      next("/404")
    }
  } else {
    next()
  }
})

export default router
